<template>
	<view class="animated fadeIn faster">
		<view class="p-3">
			<view class="bg-fff rounded15 p-3 mb-3">
				<view class="d-flex d-flex-between d-flex-middle mb-3">
					<text class="font-bold font30">收藏概况</text>
					<view class="d-flex d-flex-middle main-color" @click="clearAll">
						<text class="iconfont icon-shanchu mr-1 font26"></text>
						<text class="font26">清空收藏</text>
					</view>
				</view>
				<view class="d-flex">
					<view class="d-flex-item d-flex d-flex-column d-flex-center d-flex-middle">
						<text class="mb-1 font36">{{favInfo.total}}</text>
						<text class="font24">全部收藏</text>
					</view>
					<view class="d-flex-item d-flex d-flex-column d-flex-center d-flex-middle">
						<text class="mb-1 font36">{{favInfo.today_count}}</text>
						<text class="font24">今日收藏</text>
					</view>
				</view>
			</view>
			
			<view>
				<view class="bg-fff rounded15 d-flex d-flex-middle d-flex-between py-2 px-3 mb-2" @click="toggleDaily">
					<text>章节练习（{{favInfo.grouped_data.daily.count}}）</text>
					<text class="iconfont main-color" :class="showDaily?'icon-arrowtop':'icon-xiajiantou'"></text>
				</view>
				<view class="px-2" v-if="showDaily">
					<view class="rounded10 bg-fff p-1 mb-2" v-for="daily in favInfo.grouped_data.daily.list" :key="daily.id">
						<view class="text-clamp-two">
							<text style="background-color: #FF8D1A;color: #ffffff;font-size: 20rpx;padding:4rpx 8rpx;border-radius: 5rpx;margin-right: 5rpx;">{{daily.type==2?'判断':'选择'}}</text>
							<text class="font24 color666">{{daily.content}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="mb-7">
				<view class="bg-fff rounded15 d-flex d-flex-middle d-flex-between py-2 px-3 mb-2" @click="toggleRandom">
					<text>随机练习（{{favInfo.grouped_data.random.count}}）</text>
					<text class="iconfont main-color" :class="showRandom?'icon-arrowtop':'icon-xiajiantou'"></text>
				</view>
				<view class="px-2" v-if="showRandom">
					<view class="rounded10 bg-fff p-1 mb-2" v-for="random in favInfo.grouped_data.random.list" :key="random.id">
						<view class="text-clamp-two">
							<text style="background-color: #FF8D1A;color: #ffffff;font-size: 20rpx;padding:4rpx 8rpx;border-radius: 5rpx;margin-right: 5rpx;">{{random.type==2?'判断':'选择'}}</text>
							<text class="font24 color666">{{random.content}}</text>
						</view>
					</view>
				</view>
			</view>
			
			
			<!-- <view class="d-flex d-flex-center">
				<view class="bg-fff rounded60 d-flex d-flex-middle" style="padding: 20rpx 150rpx; color: #D43030;">
					<text class="iconfont icon-shanchu mr-1 font28"></text>
					<text>删除所有收藏</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import { userApi } from '@/http/userApi.js'
	export default {
		data() {
			return {
				showDaily:true,
				showRandom:false,
				favInfo:{
					daily_count: 0,
					random_count: 0,
					today_count: 0,
					total: 0,
					grouped_data:{
						daily:{
							count: 0,
							list: []
						},
						random:{
							count: 0,
							list: []
						}
					}
				}
			}
		},
		onReady() {
			this.getFavList()
		},
		methods: {
			toggleDaily(){
				this.showDaily = !this.showDaily
			},
			toggleRandom(){
				this.showRandom = !this.showRandom
			},
			getFavList(){
				userApi.favQuestionList().then((res)=>{
					this.favInfo = res
				})
			},
			clearAll(){
				let that = this
				uni.showLoading({
					title:'操作中...'
				})
				userApi.clearFavList().then((res)=>{
					uni.hideLoading()
					uni.showToast({
						title:'清除成功'
					})
					that.favInfo = {
						daily_count: 0,
						random_count: 0,
						today_count: 0,
						total: 0,
						grouped_data:{
							daily:{count: 0,list: []},
							random:{count: 0,list: []}
						}
					}
				}).catch((e)=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>

</style>
